<template>
  <div class="Background">
    <div class="title">
      <img src="@/assets/images/head.jpg"
           alt="">
      <p>编程导航</p>
    </div>
    <div class="content">
      <el-tabs type="border-card"
               @tab-click="selectTab">
        <el-tab-pane v-for="item in bgcList"
                     :key="item.key"
                     :label="item.name">
          <el-scrollbar v-if="tabList.indexOf(item.name) !== -1">
            <div class="card-content">
              <div class="card"
                   v-for="itemx in item.list"
                   :key="itemx.name"
                   @click="$emit('setBackground', itemx)">
                <div class="el-image">
                  <el-image class="el-image__inner"
                            :src="itemx.preview"
                            fit="fill"
                            lazy />
                </div>
                <p class="name">{{itemx.name}}</p>
              </div>
            </div>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>

<script lang="ts">
import defaultTabPane from "@/constant/defaultTabPane.js";
import { defineComponent, reactive, ref } from "vue";
import { getCodeBackground } from '@/data/api'

export default defineComponent({
  setup() {
    const bgcList = ref()
    const tabList = reactive([]);
    getCodeBackground().then(res => {
      bgcList.value = res.data
      tabList.push(res.data[0].name)
    })

    const selectTab = (e) => {
      let target = e.props.label;
      if (tabList.indexOf(target) === -1) {
        tabList.push(target);
      }
    };

    return {
      bgcList,
      tabList,
      selectTab,
    };
  },
});
</script>

<style lang="less" scoped>
.Background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  .title {
    text-align: left;
    height: 65px;
    width: 100%;
    padding: 0 16px;
    display: flex;
    align-items: center;
    background: transparent;
    img {
      height: 32px;
      width: 32px;
      border-radius: 3px;
    }
    p {
      font-size: 18px;
      margin-left: 12px;
      color: #eee;
    }
  }
  .content {
    height: calc(100% - 65px);
    background-color: #eeeeee;
    padding: 20px;
    .card-content {
      margin: 10px 0 20px 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
      .card {
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 20px;
        width: calc(25% - 20px);
        background-color: #f5f5f5;
        border: #eee;
        cursor: pointer;
        &:hover {
          box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
          0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09) !important;
        }
        .name {
          margin: 0 5px 5px;
          padding: 5px;
          @media screen and (max-width: 1500px) {
            font-size: 16px;
          }
          @media screen and (max-width: 1200px) {
            font-size: 14px;
          }
          @media screen and (max-width: 900px) {
            font-size: 12px;
          }
        }
      }
    }
  }
}
.el-tab-pane {
  height: calc(100vh - 180px);
  overflow: hidden;
}
.el-tabs--border-card > .el-tabs__content {
  padding: 15px;
}
</style>
